<template>
 <div style="width: 100vw;height: 100vh;position: relative;">
    <div v-if="!isMobile">
         <div style="width: calc(100vw - 550px);height: 100vh;position: absolute;right: 0;top: 0;background-color: var(--color-neutral-1);padding-left: calc(50vw - 275px);padding-top: 50vh;">
        <div style="width: 320px;transform: translate(-50%,-50%);">
            <div style="font-size: 32px;margin-bottom: 10px;">
                <span style="margin-right: 5px;" class="title" :class="currentSelectedTitle==1?['title-selected']:[]" @click="()=>{
                    currentSelectedTitle=1;
                    input1='';
                    input2='';
                }">
                    登录
                </span>
                <span style="margin-right: 5px;" class="title" :class="currentSelectedTitle==2?['title-selected']:[]" @click="()=>{
                    currentSelectedTitle=2;
                    input1='';
                    input2='';
                }">
                    注册
                </span>
            </div>
            <div v-if="currentSelectedTitle==1">
                    <div style="margin-bottom: 15px;">
                        账号
                        <a-input @press-enter="loginUser" :disabled="isLogining" v-model="input1" :allow-clear="true" style="height: 35px;background-color: var(--color-neutral-1);border: 0px;border-bottom: 1px solid rgb(0,120,215);padding: 0 0;" placeholder="请输入账号（例如：2300000001）"></a-input>
                    </div>
                    <div style="margin-bottom: 15px;">
                        密码
                        <a-input @press-enter="loginUser" :disabled="isLogining" v-model="input2" type="password" :allow-clear="true" style="height: 35px;background-color: var(--color-neutral-1);border: 0px;border-bottom: 1px solid rgb(0,120,215);padding: 0 0;" placeholder="请输入密码"></a-input>
                    </div>
                    <div style="width: 100%;bottom: 10px;font-size: 14px;cursor: pointer;" @click="changePage(1)">
                        暂不登录
                    </div>
                    <div style="width: 100%;bottom: 10px;font-size: 14px;cursor: pointer;margin-top: 10px;" @click="changePage(10)">
                        咨询师登录
                    </div>
                    <div style="width: 100%;text-align: right;">
                        <a-button :loading="isLogining" style="padding: 0 30px;" type="primary" @click="loginUser">登录</a-button>
                    </div>
                </div>
            <div v-if="currentSelectedTitle==2">
                <div v-if="isRegisted==false">
                    <div style="margin-bottom: 15px;">
                        密码
                        <a-input @press-enter="regUser" :disabled="isRegisting" v-model="input1" type="password" :allow-clear="true" style="height: 35px;background-color: var(--color-neutral-1);border: 0px;border-bottom: 1px solid rgb(0,120,215);padding: 0 0;" placeholder="请输入密码"></a-input>
                    </div>
                    <div style="margin-bottom: 15px;">
                        重复密码
                        <a-input @press-enter="regUser" :disabled="isRegisting" v-model="input2" type="password" :allow-clear="true" style="height: 35px;background-color: var(--color-neutral-1);border: 0px;border-bottom: 1px solid rgb(0,120,215);padding: 0 0;" placeholder="请再次输入密码"></a-input>
                    </div>
                    <div style="width: 100%;text-align: right;">
                        <a-button :loading="isRegisting" style="padding: 0 30px;" type="primary" @click="regUser">注册</a-button>
                    </div>
                </div>
                <div v-if="isRegisted">
                    <div style="font-size: 14px;margin-bottom: 15px;">
                        注册成功！下面你的登录账号，请牢记。
                    </div>
                    <div style="font-size: 20px;margin-bottom: 15px;">
                        {{ registedUserAccount }}
                    </div>
                    <div>
                        <a-button style="padding: 0 30px;" type="primary" @click="()=>{
                            input1=registedUserAccount;
                            input2='';
                            isRegisted=false;
                            currentSelectedTitle=1;
                        }">登录</a-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="width: calc(550px);height: 100vh;left: 0;top: 0;background-position: center;background-size: cover;background-repeat: no-repeat;background-image: url('https://api.dujin.org/bing/1920.php');position: relative;">
        <div style="width: 100%;height: 100%;backdrop-filter: blur(20px);padding-left: 275px;padding-top: 50vh;background-color: rgba(255,255,255,0.6);">
            <div style="transform: translate(-50%,-50%);color: black;width: 350px;">
                <div  style="width: 100%;font-size: 26px;line-height: 80px;">
                    欢迎来到志愿助手平台！
                </div>
                <div style="line-height: 40px;width: 100%;">
                    志愿助手平台旨在为考生提供全方位的辅助服务。无论您是想了解院校信息、查询专业详情，还是希望获得智能化的志愿填报建议，我们都能满足您的需求。
                </div>
            </div>
        </div>
    </div>   
    </div>
    <div v-if="isMobile" style="width: 100%;height: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;background-image: url(https://api.dujin.org/bing/1920.php);">
        <div style="width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);padding-left: 50vw;padding-top: 50vh;text-align: center;">
            <div style="transform: translate(-50%,-50%);display: inline-block;">
                <div v-if="isRegisted==false">
                    <div style="font-size: 24px;color: white;display: inline-block;margin-bottom: 20px;">
                    <span :style="{color:currentSelectedTitle==1?'rgb(255,255,255,1)':'rgb(255,255,255,0.6)'}" @click="()=>{
                    currentSelectedTitle=1;
                    input1='';
                    input2='';
                }">登录</span><span style="margin-left: 20px;" :style="{color:currentSelectedTitle==2?'rgb(255,255,255,1)':'rgb(255,255,255,0.6)'}" @click="()=>{
                    currentSelectedTitle=2;
                    input1='';
                    input2='';
                }">注册</span>
                </div>
                <div style="margin-bottom: 20px;">
                    <div style="width: 280px;padding:3px 3px;background-color: rgba(255,255,255,0.2);padding-bottom: 0;border-bottom: 2px solid rgb(0,120,215);border-radius: 5px;backdrop-filter: blur(20px);margin-bottom: 10px;">
                        <a-input :type="currentSelectedTitle==2?'password':''" v-model="input1" style="width: 100%;height: 35px;background-color: rgba(0,0,0,0.8);color: white;padding: 0px 10px;border: 0;" :placeholder="currentSelectedTitle==1?'账号（例如：2300000001）':'密码'" allow-clear></a-input>
                    </div>
                    <div style="width: 280px;padding:3px 3px;background-color: rgba(255,255,255,0.2);padding-bottom: 0;border-bottom: 2px solid rgb(0,120,215);border-radius: 5px;backdrop-filter: blur(20px);margin-bottom: 0px;">
                        <a-input type="password" v-model="input2" style="width: 100%;height: 35px;background-color: rgba(0,0,0,0.8);color: white;padding: 0px 10px;border: 0;" :placeholder="currentSelectedTitle==1?'密码':'重复密码'" allow-clear></a-input>
                    </div>
                </div>
                <div>
                    <a-button style="padding: 0px 30px;color: white;background-color: rgba(255,255,255,0.2);backdrop-filter: blur(20px);" @click="()=>{
                        if(currentSelectedTitle==1){
                            loginUser();
                        }else{
                            regUser();
                        }
                    }">{{ currentSelectedTitle==1?'登录':'注册' }}</a-button>
                </div>
                </div>
                <div v-if="isRegisted">
                    <div style="font-size: 20px;margin-bottom: 15px;color: white;">
                        注册成功！下面你的登录账号，请牢记。
                    </div>
                    <div style="font-size: 20px;margin-bottom: 15px;color: white;">
                        {{ registedUserAccount }}
                    </div>
                    <div>
                        <a-button style="padding: 0 30px;" type="primary" @click="()=>{
                            input1=registedUserAccount;
                            input2='';
                            isRegisted=false;
                            currentSelectedTitle=1;
                        }">登录</a-button>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%;position: absolute;bottom: 10px;text-align: center;color: white;font-size: 12px;" @click="changePage(1)">
            暂不登录
        </div>
    </div>
 </div>
</template>

<script>
import sha256 from 'sha256'
import axios from 'axios'
import jscookie from 'js-cookie'
import router from '@/utils/router'

export default{
  data(){
    return{
      currentSelectedTitle:1,
      input1:'',
      input2:'',
      isRegisting:false,
      isRegisted:false,
      registedUserAccount:'',
      isLogining:false,
      isMobile:false,
    }
  },
  mounted(){
    jscookie.remove('loginedUserInfo');
    this.isMobile=this.isMobilef();
  },
  methods:{
        isMobilef() {
            var userAgent = navigator.userAgent;
            var mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  
            if (mobileRegex.test(userAgent)) {
                return true;
            } else {
                return false;
            }
        },
    changePage(id){
        switch (id) {
            case 1:
                router.push('/');
                break;
            case 7:
                router.push('/login');
                break;
            case 10:
                router.push('/teacher');
                break;
        }
    },
    loginUser(){
        if(this.input1==''){
            this.$message.error({
                content:'请输入账号',
            })
            return;
        }
        if(this.input2==''){
            this.$message.error({
                content:'请输入密码',
            })
            return;
        }
        var data={
    account:this.input1,
    password:sha256(this.input2)
}
this.isLogining=true;
        var config = {
   method: 'get',
   url: '/api/v1/users/login?data='+ JSON.stringify(data),
   headers: { 
      'Content-Type': 'application/json', 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
  this.isLogining=false;
  if(res.data.status!=1){
    this.$message.error({
        content:res.data.content,
    })
    return;
  }
  jscookie.set('loginedUserInfo',JSON.stringify(res.data.data));
  router.push('/');
})
    },
    regUser(){
        if(this.input1==''){
            this.$message.error({
                content:'请设置登录密码',
            })
            return;
        }
        if(this.input2==''){
            this.$message.error({
                content:'请再次输入登录密码',
            })
            return;
        }
        if(this.input1!=this.input2){
            this.$message.error({
                content:'两次输入的密码不一致',
            })
            return;
        }
var data={
    name:'',
    home:'',
    subjects:'',
    score:0,
    ranking:'',
    idNumber:'',
    password:sha256(this.input1)
}

        var config = {
   method: 'get',
   url: '/api/v1/users/regist?data='+ JSON.stringify(data),
   headers: { 
      'Content-Type': 'application/json', 
      'Accept': '*/*', 
   }
};
this.isRegisting=true;
axios(config)
.then((res) => {
  this.isRegisted=true;
  this.isRegisting=false;
  this.registedUserAccount=res.data.account;
})
    }
  },
  props:{
    
  },
}
</script>

<style scoped>

.title:hover{
    color: dimgray;
}

.title-selected{
    color: black !important;
}

.title{
    color: gray;
    transition: color .2s;
    user-select: none;

}

</style>